<template>
	<view class="login-container">
		<!-- 标题 -->
		<view :class="loginMode == 'login'?'login-header':'login-header-register'">
			<image class="login-img" mode="aspectFill" src="/static/image/logo.png" @click="openPopup"></image>
		</view>

		<!-- 登录方式切换 -->
		<view class="login-mode">
			<text :class="['mode-btn', { active: loginMode == 'login' }]" @click="switchMode('login')">账号登录</text>
			<text :class="['mode-btn', { active: loginMode == 'register' }]" @click="switchMode('register')">账号注册</text>
		</view>

		<!-- 表单区域 -->
		<view class="login-form">
			<!-- 登陆 -->
			<view class="input-group">
				<input v-model="form.username" class="input" type="text" placeholder="请输入账号 6-20位" maxlength="20" />
				<view class="input-icon">
					<uni-icons type="phone" size="18" color="#999"></uni-icons>
				</view>
			</view>
			<!-- 邮箱 -->
			<view v-if="loginMode == 'register'" class="input-group">
				<input v-model="form.email" class="input" type="text" placeholder="请输入邮箱 （用于重置密码）" />
				<view class="input-icon">
					<uni-icons type="email" size="18" color="#999"></uni-icons>
				</view>
			</view>
			<!-- 验证码 -->
			<view v-if="loginMode == 'register'" class="input-group">
				<input v-model="form.code" class="input" type="text" placeholder="邮箱验证码" maxlength="6" />
				<view class="input-icon">
					<text class="send-code-bt" @click="getEmailCode" v-if="email_tip_status">获取验证码</text>
					<uni-countdown v-else color="#FFFFFF" background-color="#ff0000" border-color="#ff0000"
						:showDay="false" :showHour="false" :showMinute="false" :second="60"
						@timeup="resetEmailStatus"></uni-countdown>

				</view>
			</view>
			<!-- 密码输入 -->
			<view class="input-group">
				<input v-model="form.password" class="input" :type="showPassword ? 'text' : 'password'"
					placeholder="请输入密码 6-20位" maxlength="20" />
				<view class="input-icon" @click="showPassword = !showPassword">
					<uni-icons :type="showPassword ? 'eye-slash' : 'eye'" size="18" color="#999"></uni-icons>
				</view>
			</view>

			<!-- 再次密码输入 -->
			<view v-if="loginMode == 'register'" class="input-group">
				<input v-model="form.password2" class="input" :type="showPassword2 ? 'text' : 'password'"
					placeholder="请再次输入密码" maxlength="20" />
				<view class="input-icon" @click="showPassword2 = !showPassword2">
					<uni-icons :type="showPassword2 ? 'eye-slash' : 'eye'" size="18" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 登录按钮 -->
		<view class="login-btn-container">
			<button v-if="loginMode == 'login'" class="login-btn" @click="loginAccount">登 录</button>
			<button v-else class="login-btn" @click="registerAccount">注 册</button>
		</view>

		<!-- 其他选项 -->
		<view class="login-options" v-if="loginMode == 'login'">
			<view class="option" @click="goResetPassword"> 忘记密码 </view>
			<view class="option" @click="goBackPage"> 暂不登陆 </view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app'
	import api from '@/config/api'
	import request from '@/utils/request'
	import {
		showToast,
		getUserInfo,
		setUserInfo
	} from '@/utils/utils';

	// ref
	const loginMode = ref('login') // 登录模式（password: 账号登陆, regist: 注册）
	const showPassword = ref(false) // 是否显示密码
	const showPassword2 = ref(false) // 是否显示密码2
	const email_tip_status = ref(true)

	// 表单数据
	const form = ref({
		username: '',
		password: '',
		password2: '',
		email: '',
		code: ''
	});

	let userInfo = {}

	onReady(() => {})

	// 切换登录模式
	const switchMode = (mode) => {
		loginMode.value = mode;
		// 切换模式时清空表单
		form.value = {
			username: '',
			password: '',
			password2: ''
		}
	};

	// 恢复获取验证码状态
	const resetEmailStatus = () => {
		email_tip_status.value = true
	}

	// 获取验证码
	const getEmailCode = () => {
		if (!form.value.email || form.value.email.trim() == "") {
			showToast('请输入邮箱')
			return
		}
		form.value.email = form.value.email.trim()
		// 校验邮箱格式
		if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(form.value.email)) {
			showToast('邮箱格式错误')
			return;
		}
		email_tip_status.value = false
		// 请求接口
		request.post(api.host + api.getEmailCodeUrl, {
			email: form.value.email,
			subjectCode: 'register'
		}).then((result) => {
			showToast(result.msg)
		}).catch(() => {
			resetEmailStatus()
		})
	}

	// 注册账号
	const registerAccount = () => {
		// 校验输入
		if (!form.value.username || !form.value.password || !form.value.email || !form.value.code) {
			showToast('信息填写不完整')
			return;
		}
		if (form.value.username.trim() == "" || form.value.password.trim() == "" ||
			form.value.email.trim() == "" || form.value.code.trim() == "") {
			showToast('信息填写不完整')
			return;
		}
		// 账号只能是数字和字母
		if (!/^[a-zA-Z0-9]+$/.test(form.value.username)) {
			showToast('账号只能是数字和字母')
			return;
		}
		if (form.value.username.startsWith("admin")) {
			showToast('账号不能以admin开头')
			return;
		}
		if (form.value.username.length < 6 || form.value.username.length > 20) {
			showToast('账号长度6-20位')
			return;
		}
		if (form.value.password.length < 6 || form.value.password.length > 20) {
			showToast('密码长度6-20位')
			return;
		}
		if (form.value.password != form.value.password2) {
			showToast('两次密码输入不相同，请重新输入')
			return;
		}
		// 校验邮箱格式
		if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(form.value.email)) {
			showToast('邮箱格式错误')
			return;
		}

		uni.showLoading({
			title: '正在注册...',
			mask: true
		});
		request.post(api.host + api.registerUrl, {
			account: form.value.username,
			password: form.value.password,
			password2: form.value.password2,
			email: form.value.email,
			code: form.value.code,
		}).then(result => {
			uni.hideLoading()
			showToast('注册成功，请登陆')
			switchMode('login')
		}).catch(() => {
			uni.hideLoading()
		})
	};

	// 登录处理
	const loginAccount = () => {
		// 校验输入
		if (!form.value.username || !form.value.password) {
			showToast('请输入账号、密码')
			return;
		}
		uni.showLoading({
			title: '正在登陆...',
			mask: true
		});
		request.post(api.host + api.loginUrl, {
			account: form.value.username,
			password: form.value.password
		}).then(result => {
			uni.hideLoading()
			result.data.userId = result.data.id
			// 缓存
			setUserInfo(result.data)
			// 跳转到首页
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}).catch(() => {
			uni.hideLoading()
		})
	};

	// 前往重置密码
	const goResetPassword = () => {
		uni.navigateTo({
			url: '/pages/manage_account/reset_password'
		})
	}

	// 返回
	const goBackPage = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	@import url("login.css");
</style>